<template>
  <view class="page-food-order">
    <view class="table-no">桌号：{{ tableNo || "-" }}</view>
    <view class="food-list">
      <view class="food-item" v-for="(item, index) in cartList" :key="index">
        <view class="left">
          <view
            class="img"
            :style="{
              backgroundImage: `url(${foodFile + item.thumbnail})`,
            }"
          >
            <!-- <image
              :src="require('@/static/user/index-icona.png')"
              mode="scaleToFill"
            ></image> -->
          </view>
          <view class="title-num">
            <view>
              <view class="title">{{ item.name }}</view>
              <view class="remark">{{ item.remark || "" }}</view>
            </view>
            <view class="num">x{{ item.number }}</view>
          </view>
        </view>
        <view class="right">
          ￥{{
            item.number && item.price
              ? (item.number * item.price).toFixed(2)
              : "-"
          }}
        </view>
      </view>
    </view>
    <shopCart :isOrder="true" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableNo: uni.getStorageSync("tableNo"),
      foodFile: uni.getStorageSync("foodFile"),
    };
  },
  computed: {
    cartList() {
      return this.$store.state.user.cartList;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.page-food-order {
  background-color: #fcfbfc;
  .table-no {
    background-color: #fff;
    padding: 30rpx;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    font-weight: bold;
    color: #373737;
    border-bottom: 1px solid #f6f6f6;
  }
  .food-list {
    padding: 30rpx;
    border-bottom: 1px solid #f6f6f6;
    background-color: #fff;
    .food-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50rpx;
      .left {
        display: flex;
        align-items: center;
        .img {
          width: 140rpx;
          height: 140rpx;
          flex-shrink: 0;
          margin-right: 30rpx;
          background-color: #f2f2f2;
          border-radius: 10rpx;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .title-num {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
          }
          .remark {
            font-size: 22rpx;
            color: #999;
            margin-bottom: 20rpx;
          }
          .num {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }
}
</style>
